﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="/resource/UserPwoer.tld" prefix="p"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>

<script type="text/javascript" src="${path }/resource/js/fomatJs.js"></script>

<title></title>
</head>

<div class="ibox-content" id="app">
	<form class="form-horizontal" id="dataform"
		onsubmit="javascripr:return false;">

		<c:if test="${obj ne null }">
			<input type="hidden" name="id" value="${obj.id }">
			<input type="hidden" id="projIdSrc" value="${obj.cate.projId}">
		</c:if>
		<input type="hidden" name="projId" id="projId" value="${projId}">
		<div class="form-group">

			<label class="col-sm-2 control-label " for="exampleInputName2">接口类型</label>
			<div class="col-sm-4">
				<select class="form-control select2" size="1" name="cateId"
					id="cateId">
					<option value=''>--请选择接口类型--</option>
				</select>
			</div>
			<label class="col-sm-2 control-label  ">接口名称</label>
			<div class="  col-sm-4">
				<input type="text" name="name" value="${obj.name }"
					class="form-control " dataType="*1-500">
				<div class="Validform_checktip"></div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label  ">开发者</label>
			<div class="  col-sm-4">

				<c:if test="${obj ne null }">
					<input id="code" rows="10" class="form-control" name="developer"
						value="${obj.developer}" />
				</c:if>
				<c:if test="${obj eq null }">
					<input id="code" rows="10" class="form-control" name="developer"
						value="${user.name}" />
				</c:if>

			</div>
			<label class="col-sm-2 control-label  ">版本</label>
			<div class="  col-sm-4">
				<input class="form-control" name="version" value="${obj.version}" />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label  ">请求方式</label>
			<div class="  col-sm-4">
				<select class="form-control " name="method">
					<option value='GET'
						<c:if test="${obj.method eq 'GET' }"> selected="selected" </c:if>>GET</option>
					<option value='POST'
						<c:if test="${obj.method eq 'POST' }">selected="selected" </c:if>>POST</option>
				</select>
			</div>
			<label class="col-sm-2 control-label  ">备注</label>
			<div class="  col-sm-4">
				<input type="text" name="remark" value="${obj.remark }"
					class="form-control ">
				<div class="Validform_checktip"></div>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label  ">请求头信息</label>
			<div class="  col-sm-10">
				<input type="text" name="headerParam" value="${obj.headerParam }"
					class="form-control "  >
			</div>
			<div class="Validform_checktip"></div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label  ">访问url</label>
			<div class="  col-sm-10">
				<input type="text" name="url" value="${obj.url }"
					data-toggle="tooltip" data-placement="top"
					title="路径填写相对路径,restful 路径请使用 ..url/{param} 表示"
					class="form-control " dataType="*">
				<div class="Validform_checktip"></div>
			</div>
			<div class="Validform_checktip"></div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label">提交参数<br>
				<button class="btn btn-primary btn-xs"
					@click="josnImport('inParams')">JSON导入</button></label>
			<div class="col-sm-10">
				<table v-show="inParamsShow"
					class="table table-bordered table-condensed table-striped table-hover">
					<tr>
						<th>层级</th>
						<th>名称</th>
						<th>是否必须</th>
						<th>位置</th>
						<th>类型</th>
						<th>示例值</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
					<tr v-for="(param,index) in inParams">
						<td>{{param.deep}}</td>
						<td><input
							:style="'border-left: '+param.deep*10 + 'px solid #ffdcdc'"
							class="form-control" v-model="param.name" /></td>
						<td><select v-model="param.necessary" class="form-control">
								<option value="true">true</option>
								<option value="false">false</option>
						</select></td>
						<td><select v-model="param.inUrl" class="form-control">
								<option value="true">restful</option>
								<option value="false">普通参数</option>
						</select></td>
						<td><select v-model="param.type" class="form-control">
								<option value="string">string</option>
								<option value="number">number</option>
								<option value="boolean">boolean</option>
								<option value="object">object</option>
								<option value="array[number]">array[number]</option>
								<option value="array[boolean]">array[boolean]</option>
								<option value="array[string]">array[string]</option>
								<option value="array[object]">array[object]</option>
								<option value="file">file</option>
						</select></td>
						<td><input class="form-control" v-model="param.def" /></td>
						<td><input class="form-control" v-model="param.remark" /></td>
						<td class="text-center"><a
							v-show="param.type=='object' || param.type=='array[object]' "
							@click="addParam('inParams',param,index)"> <i
								class="fa fa-plus"></i></a> &nbsp;&nbsp; <a
							@click="del(inParams,index)" class="text-danger"> <i
								class="fa fa-trash"></i></a></td>
					</tr>
					<tr>
						<td colspan="100">
							<button type="button" @click="addParam('inParams')"
								class="btn btn-primary pull-right btn-sm">添加参数</button>
							<button type="button" @click="createPostParam('inParams','postParam')"
								style="margin-right: 10px;"
								class="btn btn-primary pull-right btn-sm">生成请求示例</button>
						</td>
					</tr>
					<tr>
						<td colspan="100"><textarea id="postParam" name="exIn"  
								class="form-control" rows="10">${obj.exIn}</textarea></td>
					</tr>

				</table>
				<div class="row" v-show="inParamsShowJSON">
					<div class="col-sm-10">
						<textarea class="form-control" rows="10" id="inParamsJSON"></textarea>
						<code>{{inParamsErrorMsg}}</code>
					</div>
					<div class="col-sm-2">
						<button class="btn btn-primary btn-xs"
							@click="josnImportToVue('inParams')">导入</button>
						<button class="btn btn-primary btn-xs"
							@click="cancelImport('inParams')">取消</button>
					</div>
				</div>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">返回参数<br>
				<button class="btn btn-success btn-xs"
					@click="josnImport('outParams')">JSON导入</button></label>
			<div class="col-sm-10">
				<table v-show="outParamsShow"
					class="table table-bordered table-condensed table-striped table-hover">
					<tr>
						<th>层级</th>
						<th>名称</th>
						<th>是否必须</th>
						<th>类型</th>
						<th>示例值</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
					<tr v-for="(param,index) in outParams">
						<td>{{param.deep}}</td>
						<td><input
							:style="'border-left: '+param.deep*10 + 'px solid #ffdcdc'"
							class="form-control" v-model="param.name" /></td>
						<td><select v-model="param.necessary" class="form-control">
								<option value="true">true</option>
								<option value="false">false</option>
						</select></td>
						<td><select v-model="param.type" class="form-control">
								<option value="string">string</option>
								<option value="number">number</option>
								<option value="boolean">boolean</option>
								<option value="object">object</option>
								<option value="array[number]">array[number]</option>
								<option value="array[boolean]">array[boolean]</option>
								<option value="array[string]">array[string]</option>
								<option value="array[object]">array[object]</option>
								<option value="file">file</option>
						</select></td>
						<td><input class="form-control" v-model="param.def" /></td>
						<td><input class="form-control" v-model="param.remark" /></td>
						<td class="text-center"><a
							v-show="param.type=='object' || param.type=='array[object]' "
							@click="addParam('outParams',param,index)"> <i
								class="fa fa-plus"></i></a> &nbsp;&nbsp; <a
							@click="del(outParams,index)" class="text-danger"> <i
								class="fa fa-trash"></i></a></td>
					</tr>
					<tr>
						<td colspan="100">
							<button type="button" @click="addParam('outParams')"
								class="btn btn-success pull-right btn-sm">添加参数</button>
								<button type="button" @click="createPostParam('outParams','backParam')"
								style="margin-right: 10px;"
								class="btn btn-success pull-right btn-sm">生成返回参数示例</button>
						</td>
					</tr>
					<tr>
						<td colspan="100"><textarea id="backParam" name="exOut"  
								class="form-control" rows="10">${obj.exOut }</textarea></td>
					</tr> 

				</table>
				<div class="row" v-show="outParamsShowJSON">
					<div class="col-sm-10">
						<textarea class="form-control" rows="10" id="outParamsJSON"></textarea>
						<code>{{outParamsErrorMsg}}</code>
					</div>
					<div class="col-sm-2">
						<button class="btn btn-primary btn-xs"
							@click="josnImportToVue('outParams')">导入</button>
						<button class="btn btn-primary btn-xs"
							@click="cancelImport('outParams')">取消</button>
					</div>
				</div>
			</div>
		</div>


		<div class="form-group ">
			<div class="col-sm-12 text-center">
				<a href="javascript:;" onclick="myForm.submit()"
					class="btn btn-success radius">保存</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<button onclick="MTools.closeForm()" class="btn btn-danger radius"
					type="button">取消</button>
			</div>
		</div>
	</form>
</div>
<script src="${path }/resource/js/vue.js"></script>
<script type="text/javascript">
	var inParam,outParam,headerParam,projId;
	<c:if test="${obj ne null }">
	inParam=eval('${obj.inParam}');
	outParam=eval('${obj.outParam}');
	projId="${obj.cate.projId}";
	</c:if>
	<c:if test="${obj ne null }">
	projId="${projId}";
	</c:if>
	
	var app = new Vue({
		el : "#app",
		data : {
			inParams :inParam==null?[]:inParam,
			inParamsShow:true,
			inParamsShowJSON:false,
			inParamsErrorMsg:"",
			
			outParams :outParam==null?[]:outParam,
			
			outParamsShow:true,
			outParamsShowJSON:false,
			outParamsErrorMsg:"",
		},
		methods:{
			del:function(param,index){
				let count=1;
				for(let i=index+1;i<param.length;i++){
					if(param[i].deep && param[i].deep>param[index].deep){
						count++;
					}else{
						break;
					}
				}
				for(let i=0;i<count;i++){
					Vue.delete(param,index);
				}
				console.log(JSON.stringify(this.inParams));
			},
			addParam:function(type,param,index){
				let obj={};
				console.log(this[type]);
				if(param){
					obj={"necessary":"true","inUrl":"true","type":"string","id":MTools.random(),"parentId":param.id,"deep":param.deep+1};
					this[type].splice(index+1,0,obj)
				}else{
					obj={"necessary":"true","inUrl":"true","type":"string","id":MTools.random(),"deep":0};
					this[type].push(obj);
				}
			
			},
			josnImport:function(type){
				this[type+'Show']=false;
				this[type+'ShowJSON']=true;
			},
			cancelImport:function(type){
				this[type+'Show']=true;
				this[type+'ShowJSON']=false;
			},
			josnImportToVue:function(type){
				var json=$("#"+type+"JSON").val().replace(/[\r\n]/g,"").replace(/\ +/g,"");
				console.log(json);
				 try{
					let inObj=eval("("+json+")");
					//清空本来录入的数据
					this[type].splice(0,this[type].length);
				
					this.buildJSON(type,inObj)
					this[type+'Show']=true;
					this[type+'ShowJSON']=false;
					
			}
				catch(e){
					console.log(e);
					app[type+'ErrorMsg']="导入失败："+JSON.stringify(e.message);
				} 
			},
			buildJSON:function(type,obj,parent){
				
				let newObj={};
				let objType=typeof obj;
				if(parent){
					newObj={"name":"JSONBegin","necessary":"true","inUrl":"true","type":"","id":MTools.random(),"parentId":parent.id,"deep":parent.deep+1};
				}else{
					newObj={"name":"JSONBegin","necessary":"true","inUrl":"true","type":"","id":MTools.random(),"deep":0};
				}
				
				if(obj instanceof Array){
					console.log(obj+"是一个数组");
					let arrType= typeof obj[0];
					newObj.type="array["+arrType+"]";
					if(!parent){//如果没有父节点则新增一个jsonBegin
						this[type].push(newObj);
					}else{//如果有父节点则保持传入的对象 是parent
						newObj=parent;
					}
					//是数组的话只解析第一个,且内部数据为object
					if(arrType=='object'){
						this.buildJSON(type,obj[0],newObj);
					}							
				}else if(objType=='object'){
					console.log(obj+"是一个对象");
					for(attr in obj){
						console.log("开始循环 obj---")
						let innerNewObj={};
						if(parent){
							innerNewObj={"name":attr,"necessary":"true","inUrl":"true","type":"","id":MTools.random(),"parentId":parent.id,"deep":parent.deep+1};
						}else{
							innerNewObj={"name":attr,"necessary":"true","inUrl":"true","type":"","id":MTools.random(),"deep":0};
						}
						if(!(obj[attr]==null)){
							if( (obj[attr] instanceof Array) || ( typeof obj[attr]=='object')  ){
								innerNewObj.name=attr;
								innerNewObj.type="array["+typeof obj[attr]+"]";
								this[type].push(innerNewObj);
								this.buildJSON(type,obj[attr],innerNewObj);
							}else{
								console.log(obj[attr]+"是普通属性");
								innerNewObj.def=obj[attr];
								innerNewObj.type=typeof obj[attr];
								innerNewObj.name=attr;
								this[type].push(innerNewObj);
							}
							 
						}
					}
				} 
			},
			buildPostObject:function(param,parent,type){
				console.log("parent==============================");
				console.log(param.name);
				console.log(param.type);
				
				
				let baseType='string,number,boolean,file';
				//如果是基础类想直接添加
				if(baseType.indexOf(param.type)>-1){
					parent[param.name]=param.def?param.def:"";
					console.log("生成基本属性");
					console.log(parent);
					
				}else if(param.type.indexOf("object")>-1){//object类型会存在子节点
					let innerObj={};
					console.log(param.type);
					//判断是objec还是array
					
					if(param.type.indexOf("array")>-1){
						parent[param.name]=[innerObj];
					}else{
						parent[param.name]=innerObj;
					}
					//获得子节点，继续循环构建
					let childs=this.getChild(param,type)
					
					console.log(childs);
					for(let i=0; i<childs.length;i++){
						this.buildPostObject(childs[i],innerObj,type);
					}
					
				}else if(param.type.indexOf("array[")>-1){//数组基本类型
					parent[param.name]=param.def?param.def.split(","):[];
					//如果是数字则进行转换
					if(param.type.indexOf("number")>-1){
						for(let i=0; i<parent[param.name].length;i++){
							parent[param.name][i]=new Number(parent[param.name][i]);
						}
					}
					
					
				}

			},
			getChild:function(param,type){
				let childs=[];
				for(let i=0; i<this[type].length;i++){
					if(this[type][i].parentId && this[type][i].parentId==param.id){
						childs.push(this[type][i]);
					}
				}
				return childs;
			}
			,
			createPostParam:function(type,textId){
				console.log("开始创建json");
				
				var postObj={};
				for(let i=0; i<this[type].length;i++){
					if(this[type][i].deep==0){
						console.log("一级对象");
						console.log(this[type][i]);
						this.buildPostObject(this[type][i],postObj,type);
					}
				}
				//去除在构建时自动加上的JSONBegin标志
				if(postObj["JSONBegin"]){
					postObj=postObj["JSONBegin"];
				}
				let code=JSON.stringify(postObj);
				//console.log(code);
				var fmtCode = js_beautify(code, 2, " ", 1);
				$("#"+textId).val(fmtCode);
			},
			
			
		}
	});


	function format() {
		var fmtCode = js_beautify($("#code").val(), 1, "", 5);
		$("#code").val(fmtCode);
	}
	$(".select2").select2();
	$('[data-toggle="tooltip"]').tooltip()
	//初始化操作
	MTools.autoFullSelect();
	var myForm = MForm.initForm({
		invokeUrl : "${path}/admin/appInterface/addOrModify",
		afterSubmit : function() {
			parent.myGrid.serchData();
		},
		beforeSubmit:function(form){
			form.initParam.extendParam={"inParam":JSON.stringify(app.inParams),"outParam":JSON.stringify(app.outParams)}
			return true;
		}
	});
	initFunctionList();
	/**
	 * 初始化模块
	 */
	function initFunctionList() {
		$.AjaxProxy({
			a : false,
			c : false
		}).invoke("${path}/admin/interfaceCate/all?projId=${param.projId}",
				function(loj) {
					$("#cateId").createSelectTree(loj.attr("result").rows, {
						append : true,
						value : "name",
						defaultValue : "${obj.cateId}"
					});
				});

	}

 
</script>
</body>
</html>
